<template>
    <el-dialog :visible.sync="login_visible" append-to-body custom-class="login" width="32%">
        <div class="color-pink text-center font-24 weight-bold">欢迎登录陪秀视频</div>
        <div class="pb-30" v-if="forget_visible">
            <div class="login-form mt-30">
                <forget-password :country_code="country_code" @goBack="goBack"></forget-password>
            </div>
        </div>
        <div class="pb-30" v-else>
            <div class="login-form mt-30 position-relative">
                <div class="pt-20">
                    <el-tabs @tab-click="chooseTab" stretch v-model="current_tab">
                        <el-tab-pane label="扫码登录" name="qrcode">
                            <qrcode :current_tab="current_tab" ref="qrcode"></qrcode>
                        </el-tab-pane>
                        <el-tab-pane label="验证码登录" name="ver_code">
                            <code-form :country_code="country_code" :deal="deal" ref="code"></code-form>
                        </el-tab-pane>
                        <el-tab-pane label="密码登录" name="password">
                            <password-form :country_code="country_code" :deal="deal"
                                @forgetPassword="forgetPassword"></password-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import qrcode from './qrcode.vue'
import codeForm from './code-form.vue'
import passwordForm from './password-form.vue'
import forgetPassword from './forget-password'
export default {
    components: {
        qrcode,
        codeForm,
        passwordForm,
        forgetPassword,
    },
    computed: {
        login_visible: {
            get() {
                return this.$store.state.system.login_visible
            },
            set(val) {
                return (this.$store.state.system.login_visible = val)
            },
        },
    },
    data() {
        return {
            forget_visible: false,
            current_tab: 'qrcode',
            deal: {
                user_deal: '',
                secret_deal: '',
            },
            country_code: [],
        }
    },
    watch: {
        current_tab(value) {
            if (value == 'ver_code') {
                this.$refs.code.getDeal()
            }
        },
        login_visible(value) {
            if (value && this.current_tab == 'qrcode') {
                this.$refs.qrcode.init()
            }
        },
    },

    mounted() {
        this.getConfig()
    },
    methods: {
        chooseTab(value) { },
        forgetPassword() {
            this.forget_visible = true
        },
        goBack() {
            this.forget_visible = false
        },
        getConfig() {
            this.$request.get('/config/country_code').then((res) => {
                res.forEach((item) => {
                    this.country_code.push({
                        code: item.code,
                        name: '+' + item.code,
                    })
                })
            })
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.login {
    border-radius: 10px !important;
    background: url('@/assets/image/background.png') no-repeat !important;
    background-size: contain;
    background-size: 100% 100% !important;

    &-form {
        width: 24vw;
        height: calc(24vw - 20px);
        margin-left: calc(4vw - 20px);
        background: #fff;
        border-radius: 10px;

        // padding: 10px;
    }
}

/deep/.el-tabs__nav.is-stretch {
    min-width: auto !important;
    width: 80%;
    margin-left: 10%;
}

/deep/.el-tabs__item {
    font-size: 17px !important;
    color: #666 !important;
}

/deep/.el-tabs__item.is-active {
    color: #333 !important;
}

/deep/.el-tabs__active-bar {
    background-color: #ff1c6d !important;
}

/deep/.el-tabs__nav-wrap::after {
    background: #eee !important;
    height: 1px !important;
}

/deep/.el-dialog__header {
    padding: 0 !important;
}

/deep/.el-input__inner {
    border-radius: 25px !important;
}

/deep/.country-code {
    border: none !important;
}

/deep/.el-dropdown-selfdefine {
    border-color: transparent !important;
    background-color: transparent !important;
    color: #333 !important;
}

/deep/.el-input-group__prepend {
    background: transparent !important;
    border: none !important;
}

/deep/.login-button {
    background: #ff1c6d !important;
    color: #fff !important;
    width: 100%;
}

/deep/.el-checkbox__inner {
    border-radius: 14px !important;
}

/deep/.calc-margin {
    margin-top: calc(24vw - 385px);
}

/deep/.mobile-input input {
    text-indent: 65px !important;
}

/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #ff1c6d !important;
    border-color: #ff1c6d !important;
}</style>